<template>
  <div class="mine">
    <div class="swiper">
      <swiper :options="swiperOption"  v-if='ok'>
        <swiper-slide class="swiper-img" v-for="(item, index) in imgUrl" :key="index"> <img :src="item.img" alt="" />  </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper> 
    </div>
  </div>
</template>

<script>
import 'swiper/dist/css/swiper.css'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  name:"Swiper",
  data(){
    return {
      swiperOption: {
        pagination: {
          el:'.swiper-pagination',
        },
        autoplay:true,
        loop:true
      }
    }
  },
  components: {
     swiper,
    swiperSlide
  },
  props:{
    imgUrl:{
      type:[String,Number,Array],
      default:[]
    },
    ok:{
      type:[String,Number,Boolean],
      default:false
    }
  }
}

</script>

<style lang="less" scoped>
.mine{
  margin-top:88/100rem;
}
.swiper{
  width: 100%;
  height:350/100rem;
}
.swiper-img{
  width: 750/100rem;
  height: 350/100rem;
}
.swiper-img img{
  width: 100%;
  height:100%;
}
</style>
